<template>
  <div class="carousel-figure">
    <swiper  ref="mySwiper"
      @mouseenter.native="mouseenter"
      @mouseleave.native="mouseleave" class="swiper" :options="swiperOption">
      <swiper-slide>
        <img src="../assets/img/bg1.jpg" />
      </swiper-slide>
      <swiper-slide>
        <img src="../assets/img/bg2.jpg" />
      </swiper-slide>
      <swiper-slide>
        <img src="../assets/img/bg3.jpg" />
      </swiper-slide>
      <!-- <div class="swiper-pagination" slot="pagination"></div> -->
       <div class="swiper-pagination swiper-pagination-bullets" slot="pagination"></div>
    </swiper>
    <div class="nav">
      <img src="../assets/img/logo.png" />
      <div class="nav_banner">
        <ul>
          <li><router-link to="/">首页</router-link></li>
          <li><a href="#">蛋糕</a></li>
          <li><router-link to="/ingredient">精选食材</router-link></li>
          <li><router-link to="/actives">最新活动</router-link></li>
        </ul>
      </div>
      <div class="reg" v-show="!uname">
        <ul>
          <li><router-link to="/login">登录</router-link></li>
          |
          <li><router-link to="reg">注册</router-link></li>
          |
          <li><a href="#">购物车</a></li>
        </ul>
      </div>
      <div class="reg" v-show="uname">
        <ul>
          <li>欢迎:{{uname}}</li>
          <li><button @click="updateUname(null)" class="back_btn">退出</button></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
export default {
  computed:{
    ...mapState(['uname'])
  },
  data() {
    return {
      swiperOption: {
        loop: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          renderBullet(index, className) {
              return `<span class="${className} swiper-pagination-bullet-custom">${index + 1}</span>`
            }
        },
        effect: "fade",
        autoplay: {
          delay: 2500,
          disableOnInteraction: false,
        },
      },
    };
  },
 
  methods: {
    ...mapMutations(['updateUname']),
    mouseenter() {
      // console.log("鼠标进入");
      // console.log(this.$refs)
      this.$refs.mySwiper.$swiper.autoplay.stop()
    },
    mouseleave() {
      // console.log("鼠标离开");
      this.$refs.mySwiper.$swiper.autoplay.start()
    },
  }
};
</script>

<style lang="scss">
img {
  width: 100%;
  height: 650px;
}
.swiper {
  margin: 5px auto;
  
  .swiper-pagination-bullet {
    width: 18px;
    height: 18px;
  }
  .swiper-pagination-bullet-active {
    background: #aa8764;
  }
  .swiper-pagination-bullet-custom {
      width: 30px !important;
      height: 30px !important;
      line-height: 30px !important;
      text-align: center;
      color:#AA8764;
      opacity: 0.7;
      background: rgba(#aa8764, 0.2);
      border: 1px solid #AA8764;

      &:hover {
        opacity: 1;
      }

      &.swiper-pagination-bullet-active {
        opacity: 1;
        color:white;
        background:#3C2314;
      }
  }
}
.back_btn{
  border: 1px solid #AA8764;
  padding: 5px 10px !important;
  border-radius: 3px;
  font-size: 12px;
  background-color: transparent;
  cursor: pointer;
}
</style>
<style scoped src="../assets/css/index.css"></style>